<template>
  <div class="row">
    <div class="row__header" @click="activeRow" :class="{active:rowIndex === currentRow}"></div>
    <div class="row__body">
      <slot name="body"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    rowIndex: Number,
    currentRow: Number
  },
  methods: {
    activeRow() {
      this.$emit('activeRow', this.rowIndex);
    }
  }
};
</script>

<style scoped>
.row
{
    display: flex;

    box-sizing: border-box;
    width: 415px;
}
.row__header
{
    width: 40px;
    height: 40px;

    color: #000;
    border-radius: 6px 0 0 6px;
    background: #e0e2e0;
}
.row__body
{
    width: 375px;
    height: 100%;

    background: #f4f4f6;
}
.active
{
    background: #41a4f4;
}

</style>
